<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>规格文件</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
  <style type="text/css">
    .layui-form-label {
      width: 120px;
    }

    .layui-input-block {
      margin-left: 150px;
    }

    select {
      width: 100%;
      height: 36px;
      border: 1px solid #D2D2D2;
      border-radius: 2px;
    }

    .line-height32 {
      line-height: 36px;
    }

    .w-title {
      padding: 10px 0 20px;
    }

    .w-title a {
      color: #4a4a4a;
    }

    .w-blueline {
      display: block;
      width: 7px;
      height: 20px;
      background: #01aaed;
      float: left;
      margin-right: 10px;
      border-radius: 5px;
    }

    .aligncenter {
      text-align: center;
    }

    .alignright {
      text-align: right;
    }
  </style>
</head>

<body>
  <div class="''">
    <div class="headTitle">
      规格文件
    </div>
    <form action="" class="layui-form">
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属农场</label>
            <div class="layui-input-block">
              <select name="sec" required="true" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属管理区</label>
            <div class="layui-input-block">
              <select name="sec1" required="true" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属地块</label>
            <div class="layui-input-block">
              <select name="sec2" required="true" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
          <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
          <button class="layui-btn layui-btn-primary">重置</button>
          <a href="ggtj.html" class="layui-btn">添加</a>
          <!-- <a href="###" class="layui-btn">导入</a> -->
        </div>
      </div>
    </form>
    <table id="demoTable" lay-filter="test"></table>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script>
    layui.use(['table', 'jquery'], function () {
      var table = layui.table;
      var $ = jQuery = layui.$;
      //第一个实例
      table.render({
        elem: '#demoTable',
        //					height: 315
        //  ,url: '/demo/table/user/' //数据接口
        //						,
        page: true //开启分页
          ,  
        cols: [
          [ //表头
            {
              field: 'id',
              title: '通道',
              width: '10%',
              align: 'center',
              fixed: 'left'
            }, {
              field: 'dkmc',
              title: '设备号',
              align: 'center',
              width: '10%'
            }, {
              field: 'cjsj',
              title: '名称',
              align: 'center',
              width: '10%'
            }, {
              field: 'sbid',
              title: '字段',
              align: 'center',
              width: '10%'
            }, {
              field: 'sblx',
              title: '数据格式',
              align: 'center',
              width: '10%'
            }, {
              field: 'gz',
              title: '下限',
              width: '10%',
              align: 'center',
            }, {
              field: 'kqsd',
              title: '上限',
              width: '10%',
              align: 'center',
            }, {
              field: 'trsf',
              title: '起始位置',
              width: '10%',
              align: 'center',
            }, {
              field: 'trwd',
              title: '长度',
              width: '10%',
              align: 'center',
            }, {
              field: 'dcdl',
              title: '偏差',
              width: '10%',
              align: 'center',
            }, {
              field: 'dy',
              title: '计算公式',
              width: '10%',
              align: 'center',
            }, {
              field: 'yl',
              title: '单位',
              width: '10%',
              align: 'center',
            }, {
              field: 'experience',
              title: '操作',
              width: '20%',
              align: 'center',
              toolbar: '#barDemo'
            }
          ]
        ],
        data: [{ //表格数据
          "id": "1",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
        }, {
          "id": "1",
          "dkmc": "地块",
          "cjsj": "男",
          "sbid": "浙江杭州",
          "sblx": "人生恰似一场修行",
          "gz": "116",
          "kqsd": "116",
          "trsf": "地块",
          "trwd": "男",
          "dcdl": "浙江杭州",
          "dy": "人生恰似一场修行",
          "yl": "116",
        }]
      });
      table.on('tool(test)', function (obj) { //表格操作回调
        var layEvent = obj.event
        if (layEvent === 'del') {
          $(this).closest('tr').remove();
        } else if (layEvent === 'edit') {
          console.log(obj)
        } else if (layEvent === 'detail') {
          console.log(obj)
        }
      })
    });
    layui.use('form', function () {
      var form = layui.form;
      //监听提交
      form.on('submit(formDemo)', function (data) { //提交事件回调
        layer.msg(JSON.stringify(data.field));
        return false;
      });
    });
  </script>
</body>

</html>